<template>
  <div class="infectious-order-list">
    <div class="layout">
      <h2 class="title">传染病转运单</h2>
      <section class="search">
        <section class="search-apply-order">
          <span class="search-apply-order-name">转运单号</span>
          <input
            type="search"
            class="search-apply-order-search"
            placeholder="请输入申请单号"
            v-model="transferOrder"
          />
        </section>
        <section class="search-apply-time">
          <span class="search-apply-time-name">申请时间</span>
          <el-date-picker
            v-model="applyTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          ></el-date-picker>
        </section>
        <section class="search-patient-name">
          <span class="search-patient-name-name">患者姓名</span>
          <input type="search" class="search-patient-name-search" v-model="patientName" />
        </section>
        <div class="search-confirm" @click="GetInfectousOrderList">
          <i class="iconfont">&#xe6f7;</i>
          <button class="search-confirm-btn">搜索</button>
        </div>
      </section>
      <section class="search">
        <section class="search-from-hospital">
          <span class="search-from-hospital-name">转出医院</span>
          <input type="search" class="search-from-hospital-search" v-model="fromHospital" />
        </section>
        <section class="search-to-hospital">
          <span class="search-to-hospital-name">转入医院</span>
          <input type="search" class="search-from-hospital-search" v-model="toHospital" />
        </section>
      </section>
      <section class="hgroup">
        <h3>申请日期</h3>
        <h3>预转运时间</h3>
        <h3>转出医院</h3>
        <h3>接收医院</h3>
        <h3>患者姓名</h3>
        <h3>转出联系人</h3>
        <h3>转出联系人电话</h3>
        <h3>状态</h3>
        <h3>操作</h3>
      </section>
      <section class="parent">
        <div class="list">
          <vue-scroll>
            <ul class="child">
              <li v-for="(item,index) of transferOrderList" :key="index" class="item">
                <span>{{item.applyTime}}</span>
                <span>{{item.planTransferTime}}</span>
                <span>{{item.fromHospital}}</span>
                <span>{{item.toHospital}}</span>
                <span>{{item.patientName}}</span>
                <span>{{item.fromConnector}}</span>
                <span>{{item.fromConnectPhone}}</span>
                <span :class="{isDeal:item.status=='未处理'}">{{item.status}}</span>
                <span class="see-btn" @click="SeeTransferOrderDetail(item.toldId)">查看</span>
              </li>
            </ul>
          </vue-scroll>
        </div>
      </section>
      <footer class="footer">
        <div class="page">
          第
          <span>{{currentPage}}</span>页/共
          <span>{{pageNum}}</span>页
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[10,20,30,40]"
          layout="sizes,prev, pager, next, jumper"
          :total="total"
          :pager-count="5"
        ></el-pagination>
      </footer>
    </div>
  </div>
</template>

<script>
// import CONFIG from "../../static/config";
export default {
  name: "InfectiousOrderList",
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      applyTime: [],
      transferOrderList: "",
      total: 100,
      pageSize: 20,
      currentPage: 1,
      transferOrder: "",
      patientName: "",
      fromHospital: "",
      toHospital: "",
      pageNum: 1,
    };
  },
  methods: {
    handleCurrentChange(val) {},
    handleSizeChange(val) {
      this.pageSize = val;
    },
    GetInfectousOrderList() {
      let startTime = "",
        endTime = "";
      if (this.applyTime.length == 0) {
        startTime = CONFIG.STRATTIME;
        endTime = CONFIG.ENDTIME;
      } else {
        startTime = this.applyTime[0];
        endTime = this.applyTime[1];
      }
      let moment = require("moment");
      startTime = moment(startTime).format("YYYY-MM-DD HH:mm:ss");
      endTime = moment(endTime).format("YYYY-MM-DD HH:mm:ss");
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetInfectousOrderList",
          transferOrder: this.transferOrder,
          startTime: startTime,
          endTime: endTime,
          pageSize: this.pageSize,
          fromHospital: this.fromHospital,
          toHospital: this.toHospital,
          currentPage: this.currentPage,
          patientName: this.patientName,
        }),
        method: "post",
      }).then((res) => {
        console.log("GetInfectousOrderList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.transferOrderList = obj.list;
            this.total = obj.total;
            this.pageNum =
              obj.total < this.pageSize ? 1 : obj.total / this.pageSize;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求传染病列表失败");
        }
      });
    },
    SeeTransferOrderDetail(transferOrder) {
      this.$store.commit("SaveClickedTransferOrder", transferOrder);
      this.$router.push({ name: "InfectiousOrderDetail" });
    },
  },
  mounted() {
    this.GetInfectousOrderList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.infectious-order-list {
  height: 90%;
  display: flex;
  justify-content: center;
  padding-top: 2%;
  padding-bottom: 1%;
}
.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  background: url("../assets/image/content-bg.png") rgba(6, 53, 128, 0.2);
  background-size: 100% 100%;
}
.title {
  color: #fff;
  background: url("../assets/image/titlebg.png");
  background-size: 100% 100%;
  width: 300px;
  font-size: 21px;
  display: flex;
  justify-content: center;
  height: 54px;
  margin-top: -27px;
  line-height: 54px;
}
.search {
  display: flex;
  width: 100%;
  margin-top: 2%;
  align-items: center;
  position: relative;
}
.search-apply-order,
.search-from-hospital {
  margin-left: 20px;
  font-size: 0;
}
.search-apply-order-name,
.search-from-hospital-name {
  color: #fff;
  width: 100px;
  display: inline-block;
  font-size: 18px;
}
.search-apply-order-search,
.search-patient-name-search,
.search-from-hospital-search,
.search-to-hospital-search {
  background: rgba(0, 0, 0, 0);
  border: 1px solid #177ee6;
  outline: none;
  color: #fff;
  padding: 5px 0;
  width: 60%;
  font-size: 18px;
}
::placeholder {
  color: #aaa;
  font-size: 18px;
}
.search-apply-time,
.search-to-hospital,
.search-patient-name {
  margin-left: 100px;
  font-size: 18px;
}
.search-apply-time-name,
.search-patient-name-name,
.search-from-hospital-name,
.search-to-hospital-name {
  color: #fff;
}

.search >>> .el-input__inner {
  background: rgba(0, 0, 0, 0);
  border: 1px solid #177ee6;
  width: 500px;
}
.search >>> .el-range-separator {
  color: #bbb;
}
.search >>> .el-range-input {
  background: rgba(0, 0, 0, 0);
  color: #fff;
  font-size: 18px;
}
.search-confirm {
  position: absolute;
  background: rgba(237, 105, 92, 0.7);
  display: flex;
  align-items: center;
  width: 110px;
  justify-content: center;
  right: 20px;
  cursor: pointer;
}
.search-confirm > .iconfont {
  color: #fff;
  font-size: 26px;
}
.search-confirm-btn {
  background: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  color: #fff;
  padding: 5px 0;
  font-size: 18px;
}
.hgroup {
  display: flex;
  margin-top: 2%;
  padding: 0 20px;
  width: 100%;
}
.hgroup > h3 {
  color: #fff;
  background: rgba(23, 126, 230, 0.5);
  width: 11.11111%;
  padding: 8px 0;
  font-size: 20px;
}
.parent {
  flex-grow: 1;
  position: relative;
  overflow: auto;
  width: 100%;
}
.list {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  left: 20px;
}
.item {
  width: 100%;
  display: flex;
}
.item > span {
  color: #fff;
  width: 11.11111%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(217, 249, 255, 0.1);
  margin-top: 10px;
  padding: 10px 5px;
  font-size: 19px;
}
.isDeal {
  color: rgba(237, 105, 92, 0.8) !important;
}
.see-btn {
  color: #19b314 !important;
  cursor: pointer;
}
.footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px 20px;
}
.page {
  color: #eee;
  font-size: 18px;
}
.footer >>> .el-pager li {
  color: #fff;
  background: rgba(0, 0, 0, 0);
}
.footer >>> .el-pager li.active {
  color: #409eff;
}
.footer >>> .btn-prev,
.footer >>> .btn-next {
  background: rgba(0, 0, 0, 0);
  color: #fff;
}
.footer >>> .el-input__inner {
  background: rgba(0, 0, 0, 0);
  border: 1px solid #177ee6;
  color: #fff;
}
.footer >>> .el-pagination__jump {
  color: #eee;
}
</style>